<template>
  <div class="content-pagination">
    <a-pagination
      v-if="emptyShow || total > 0"
      v-model:current="current"
      v-model:page-size="pageSize"
      :total="total"
      :show-total="(total: number) => `总共${total}条`"
      :page-size-options="['10', '20', '50']"
      :showSizeChanger="true"
      @change="pageChange"
    />
  </div>
</template>
<script setup lang="ts" name="Pagination">
import { computed } from 'vue'
const emit = defineEmits(['update:pageSize', 'update:current', 'paginationChange'])
const props = defineProps({
  current: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 0
  },
  emptyShow: {
    type: Boolean,
    default: false
  }
})
const current = computed({
  get() {
    return props.current
  },
  set(val: number) {
    emit('update:current', val)
  }
})
const pageSize = computed({
  get() {
    return props.pageSize
  },
  set(val: number) {
    emit('update:pageSize', val)
  }
})
const total = computed(() => props.total)
const pageChange = (page: number, pageSize: number) => {
  emit('update:pageSize', pageSize)
  emit('update:current', page)
  emit('paginationChange', page, pageSize)
}
</script>
<style></style>
